<template>
	<view class="container">
		<up-form labelPosition="top" labelWidth="100%" :model="model" :rules="rules" ref="form1">

			<up-form-item label="姓名" prop="name" :borderBottom="true">
				<up-input v-model="model.name" border="surround"></up-input>
			</up-form-item>

			<up-form-item label="联系电话" prop="phone" :borderBottom="true">
				<up-input v-model="model.phone" type="number" border="surround"></up-input>
			</up-form-item>

			<up-form-item label="报名人数">
				<view class="ticketTitle">
					成人票<text style="color:red;"> ￥ {{model.adult.raw}}</text>
				</view>
				<up-number-box v-model="model.adult.num" :min="0"></up-number-box>
			</up-form-item>

			<up-form-item :borderBottom="true">
				<view class="ticketTitle">
					儿童票<text style="color:red;"> ￥ {{model.child.raw}}</text>
				</view>
				<up-number-box v-model="model.child.num" :min="0"></up-number-box>
			</up-form-item>
		</up-form>

		<view class="confirm">
			<up-row customStyle="margin-bottom: 10px">
				<up-col span="1"></up-col>
				<up-col span="9">
					<view class="summary">总价￥ {{ sum }} </view>
				</up-col>
				<up-col span="3">
					<up-modal @confirm="confirm" @cancel="cancel" :showCancelButton="true" :show="hint.show" :title="hint.title"
						:content='hint.content' :cancelText="hint.cancelText" :confirmText="hint.confirmText">
					</up-modal>
					<up-button @click="submit" type="primary">提交</up-button>
				</up-col>
			</up-row>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from "vue";
	import { onLoad } from '@dcloudio/uni-app'
	import { gerRegister, gerChangeToPay } from '@/api/enroll.js';

	const hint = ref({
		show: false,
		title: "",
		content: "",
		confirmText: "立即支付",
		cancelText: "稍后支付"
	})
	
	// 完善验证规则
	const rules = {
		name: [{
				required: true,
				message: '请输入姓名',
				trigger: ['blur', 'change'],
			},
			{
				min: 2,
				message: '姓名至少2个字符',
				trigger: 'blur'
			}
		],
		phone: [{
				required: true,
				message: '请输入联系电话',
				trigger: 'blur'
			},
			{
				// 使用uview-plus内置的手机号验证规则
				validator: (rule, value, callback) => {
					if (!uni.$u.test.mobile(value)) {
						callback(new Error('手机号格式不正确'));
					} else {
						callback();
					}
				},
				trigger: 'blur'
			}
		]
	};

	const model = ref({
		productId: -1,
		name: null,
		phone: null,
		adult: {
			raw: 0,
			num: 0
		},
		child: {
			raw: 0,
			num: 0
		}
	})
	
	const sum = computed(() => {
		return model.value.adult.raw * model.value.adult.num +
			model.value.child.raw * model.value.child.num;
	})
	const form1 = ref(null)

	onLoad((options) => {
		const data = JSON.parse(options.data);
		model.value.productId = data.id;
		model.value.adult.raw = parseInt(data.adultPrice);
		model.value.child.raw = parseInt(data.childPrice);
	})

	function cancel() {
		hint.value.show = false;
		uni.$u.toast('已放入待支付中')
		uni.switchTab({
			url:"/pages/trip/trip"
		});
	}

	function confirm() {
		hint.value.show = false;
		uni.$u.toast('支付成功')
		gerChangeToPay(registerID.value)
		uni.switchTab({
			url:"/pages/trip/trip"
		});
	}

	const registerID = ref(0);

	async function submit() {
		const {child, adult} = model.value;
		if(adult.num == 0){
			uni.$u.toast('请至少有一位成人！');
			return;
		}
		try {
			form1.value.validate().then(async (valid) => {
				if (valid) {
					const resp = await gerRegister(model.value);
					if (resp.data != null && resp.data > 0) {
						hint.value.show = true;
						registerID.value = resp.data;
					} else {
						uni.$u.toast('购买失败');
					}
				} else {
					uni.$u.toast('请完善表单信息');
				}
			})
		} catch (error) {
			uni.$u.toast(error.msg);
			console.error('验证失败:', error);
		}
	}
</script>

<style scoped>
	.container {
		margin: 20rpx auto 0 auto;
		width: 90vw;
		height: 95vh;
		position: relative;
	}

	.confirm {
		position: absolute;
		height: 100rpx;
		bottom: 0;
		left: -5vw;
		width: 90vw;
		margin: 0 auto;
	}

	.summary {
		color: red;
	}

	.ticketTitle {
		text-align: left;
		width: 100%;
	}
</style>